<template>
	<view class="address-list">
		<view class="block" v-for="(item, idx) in dataObj.list" :key="item.id">
			<view class="content" @click="onSortTap(item.id)">
				<view class="name">
					{{item.name}}
					<span class="mobile">{{item.mobile}}</span>
				</view>
				<view class="address">{{item.address}}</view>
			</view>
			<view class="opts">
				<view class="select" :class="item.is_def === 1 ? 'selected' : ''" @click="onSelectTap(idx)">默认地址</view>
				<view class="del" @click="onDelTap(idx)">删除</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSortTap()">新建收货地址</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					list: []
				}
			}
		},
		onShow() {
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 地址选择
			onSelectTap(index) {
				const id = this.dataObj['list'][index]['id'];
				this.postDefData(id, ()=> {
					// 列表全部设置未选中
					this.dataObj['list'].filter(item => item.is_def = 0);
					// 指定下表的数据为选中
					this.dataObj['list'][index]['is_def'] = 1;
				});
			},
			// 删除
			onDelTap(index) {
				const that = this;
				const id = this.dataObj['list'][index]['id'];
				uni.showModal({
					title: '注意',
					content: '您确定删除该地址吗？',
					confirmColor: '#FE6B00',
					success: function (res) {
						if (res.confirm) {
							// 用户点击确定
							that.postDelData(id);
						}
					}
				});
			},
			// 新增或者编辑地址
			onSortTap(id) {
				if(id) {
					// 编辑
					uni.navigateTo({
						url: './source?id=' + id
					});
				} else {
					// 新增
					uni.navigateTo({
						url: './source'
					});
				}
			},
			postDefData(id, cb) {
				this.$Requset({
					url: this.$Api['address']['setDefaultOne'],
					data: {
						id: id
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						cb && cb();
					},
					fail: (err) => {
						requestErrorTip('toast', msg);
					}
				})
			},
			// 获取列表数据
			getData() {
				this.$Requset({
					url: this.$Api['address']['list'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['list'] = data;
					},
					fail: (err) => {
						requestErrorTip('toast', msg);
					}
				})
			},
			// 删除数据
			postDelData(id) {
				this.$Requset({
					url: this.$Api['address']['remove'],
					data: {
						id: id
					},
					success: (res) => {
						const { msg, status } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.getData();
					},
					fail: (err) => {
						requestErrorTip('toast', msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.address-list{
		padding-top: 18rpx;
		padding-bottom: 100rpx;
		.block{
			.content{
				position: relative;
				padding-right: 80rpx;
				&:after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -25rpx;
					right: 0;
					width: 30rpx;
					height: 50rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
				.name{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1A1A1A;
					margin-bottom: 8rpx;
					.mobile{
						color: #7F7F7F;
						margin-left: 14rpx;
					}
				}
				.address{
					max-height: 80rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #1A1A1A;
				}
			}
			.opts{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				padding-top: 24rpx;
				margin-top: 12rpx;
				border-top: 1rpx dashed #ddd;
				.select{
					float: left;
					position: relative;
					color: #1A1A1A;
					padding-left: 50rpx;
					&::before{
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 40rpx;
						height: 40rpx;
						background-repeat: no-repeat;
						background-position: center center;
						background-size: 100%;
						background-image: url(../../../static/images/cart/select.png);
					}
				}
				.selected{
					&::before{
						background-image: url(../../../static/images/cart/selected.png);
					}
				}
				.del{
					float: right;
					color: #777;
				}
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			padding: 15rpx 36rpx;
			background-color: #FFFFFF;
			border-top: 1rpx solid #E4EAED;
			.btn{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
